<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <img src="img/2.png" alt="" id="post0" style="display: none;">
    <img src="img/2.png" alt="" id="post1" style="display: none;">
    <img src="img/2.png" alt="" id="post2" style="display: none;">
    <img src="img/2.png" alt="" id="post3" style="display: none;">
    <img src="img/2.png" alt="" id="post4" style="display: none;">
    <img src="img/1.gif" alt="" id="air">
    <script>
        //1>规定飞机的走向    键盘事件，
        //2>按空格键发射子弹===》  子弹位置: left top  top与飞机一致，left飞机左侧偏移量加飞机款宽度一半
        var img = document.getElementById("air");
        document.onkeydown = function (e) {
            var e = window.event || e;
            switch (e.keyCode) {
                case 37:
                    img.style.left = img.offsetLeft - 10 + "px";
                    break;
                case 38:
                    img.style.top = img.offsetTop - 10 + "px";
                    break;
                case 39:
                    img.style.left = img.offsetLeft + 10 + "px";
                    break;
                case 40:
                    img.style.top = img.offsetTop + 10 + "px";
                    break;
                    //空格发射
                case 32:
                    game(img.offsetTop, img.offsetLeft + img.offsetWidth / 2);
                    break;
            }
        }

        function game(top, left) {
            for (var i = 0; i < 5; i++) {
                var post = document.getElementById("post" + i);
                if (post.style.display == "none") {
                    post.style.display = "block";
                    post.style.top = top + "px";
                    post.style.left = left + "px";
                    break;
                }
            }

        }
        setInterval(() => {
            for (var i = 0; i < 5; i++) {
                var post = document.getElementById("post" + i);
                post.style.top = post.offsetTop - 10 + "px";
                if (post.offsetTop < -7) {
                    post.style.display = "none";
                }
            }
        }, 50);
    </script>
</body>

</html>